<template>
	<view>
		<u-sticky bgColor="#fafafa">
			<view class="mainpadding" style="position: relative; z-index: 2;">
				<view class="ffffff flexbetween ssbox">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords" @confirm="searchclick" confirm-type="search">
					</view>
					<view class="rightss" @click="searchclick">搜索</view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding">
			<u-swiper :list="list1" height="150" keyName="image_text" indicator circular @click="lbtclick"></u-swiper>
			<view class=" flex_wrap flexleft">
				<view class="itemimgBox flexcolumn margin_top" style="width: 20%;" v-for="item in tuijianflList" :key="item.id" @click="fenleicjpid(item)">
					<view class="flicon">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="xiaohui margin_top1 textcenter">{{item.name}}</view>
				</view>
			</view>
			<view class="titletext bold huang_text margin_top textcenter" style="font-size: 36rpx;">热门分类</view>
			<view class="main_size bold hei_text margin_top1 textcenter">POPULAR CATEGORIES</view>
			<swiper class="swiper" :style="{'height':remenflList[0].length>=9?'450rpx':''}" indicator-dots indicator-active-color="#fe7200">
				<swiper-item v-for="(item,index) in remenflList" :key="index">
					<view class="flex_wrap flexleft">
						<view class="itemimgBox flexcolumn margin_top" style="width: 33.33%;" v-for="ite in remenflList[index]" :key="ite.id" @click="fenleicj(ite)">
							<view class="fenleibox">
								<image class="fenleiimg" :src="ite.image_text" mode=""></image>
								<view class="mengban flexcenter">
									<view class="xiaobai">{{ite.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="titletext bold huang_text margin_top textcenter" style="font-size: 36rpx;">特惠场景</view>
			<view class="main_size bold hei_text margin_top1 textcenter">PREFERENTIAL SCENARIO</view>
			<view class="flexbetween flex_wrap">
				<view class="tehui margin_top" v-for="item in tehuiList" :key="item.id" @click="jumpurl('/pages/index/detail?id=',item.id)">
					<image :src="item.image_text" class="tehuiimage" mode=""></image>
					<view class="fuwulable" v-if="item.is_th==1">特惠</view>
					<view class="mengban textcenter xiaobai">{{item.name}}</view>
				</view>
			</view>
			<u-divider text="更多" @click="moreth" textColor="#fe7200" lineColor="#fe7200"></u-divider>
			<view class="titletext bold huang_text margin_top textcenter" style="font-size: 36rpx;">精选场景</view>
			<view class="main_size bold hei_text margin_top1 textcenter">SELECT SCENE</view>
			<view class="flexbetween flex_wrap">
				<view class="tehui margin_top" v-for="item in jingxuanList" :key="item.id" style="height: auto;"  @click="jumpurl('/pages/index/detail?id=',item.id)">
					<view class="tehui" style="width: 100%;">
						<image :src="item.image_text" class="tehuiimage" mode=""></image>
						<view class="fuwulable" v-if="item.is_th==1">特惠</view>
						<view class="rightidnum xiaobai">ID：{{item.id}}</view>
					</view>
					<view class="yihang main_size hei_text margin_top1">{{item.name}}</view>
					<view class="xiaohuang yihang margin_top1" v-if="!is_login" @click.stop="gologin">查看报价</view>
					<view class="xiaohuang yihang margin_top1" v-if="is_login">{{item.price}}</view>
				</view>
			</view>
			<u-divider text="更多" @click="morejx" textColor="#fe7200" lineColor="#fe7200"></u-divider>
			<view class="titletext bold huang_text margin_top textcenter" style="font-size: 36rpx;">短视频案例</view>
			<view class="main_size bold hei_text margin_top1 textcenter">SHORT VIDEO CASE</view>
			<!-- <view class="margin_top" v-for="item in list.data" :key="item.id" @click="jumpurl('/pages/index/videodetail?url=',item.url)"> -->
				<view class="margin_top" v-for="item in list.data" :key="item.id" >
				<!-- <image :src="item.image_text" style="width: 100%;height: 350rpx;"  mode=""></image> -->
				<video style="width: 100%;height: 350rpx;" :data-id="item.id" :src="item.url" :id="'video'+item.id" @play="playVideo"></video>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				tuijianflList:[],
				remenflList:[],
				keywords:"",
				tehuiList:[],
				jingxuanList:[],
				is_login:false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				changePlay:false,
				videoContent:null
			}
		},
		onLoad() {
			this.getbanner() //轮播
			this.remenfl()
			this.changjingList()
			this.init()
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
		},
		onShareAppMessage: function(options) {
			return {
				title: '制片宝',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		onShareTimeline: function() {
			return {
				title: '制片宝',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			gologin(){				uni.navigateTo({					url:"/pages/login/login"				})			},
			playVideo(e){
			    let _this = this;
			    //全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复，解决Android下的问题
			    if(this.changePlay) {
			        return
			    }
			    _this.changePlay = true
			    let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
			    console.log("playVideo currentId ", currentId)
			    this.videoContent = uni.createVideoContext(currentId,_this).play();
			    
			    // 获取视频列表
			    let trailer = this.list.data;
			    trailer.forEach((item, index) =>{   // 获取json对象并遍历, 停止非当前视频
			        if (item.url != null && item.url.length > 0) {
			            let temp = 'video' + item.id;
			            if (temp != currentId) {
			                // 暂停其余视频
			                uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
			            }
			        }
			    })
			    setTimeout(()=>{
			        _this.changePlay = false
			    },1000)
			},
			// playVideo(e){
			//     let _this = this;
				
			// 	console.log(e);
			// 	let currentId = e.currentTarget.id;// 获取当前视频id
				
			// 	trailer.forEach((item, index) =>{   // 获取json对象并遍历, 停止非当前视频
			// 	    let temp = 'video' + item.id;
			// 	    if (temp != currentId) {
			// 	        uni.createVideoContext(temp,this).pause(); //暂停视频播放事件
			// 	    }else{
			// 	    	uni.createVideoContext(temp,this).play(); //暂停视频播放事件
			// 	    }
			// 	})
			// },
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit
				}
				httpRequest.request('index/anliVideoIdnex', 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
			
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			searchclick(){
				getApp().globalData.keywords = this.keywords
				uni.switchTab({
					url:"/pages/changjing/changjing"
				})
			},
			moreth(){
				uni.switchTab({
					url:"/pages/tehui/tehui"
				})
			},
			morejx(){
				getApp().globalData.is_jx = 1
				uni.switchTab({
					url:"/pages/changjing/changjing"
				})
			},
			fenleicjpid(item){
				getApp().globalData.yjid = item.id
				getApp().globalData.yjtext = item.name
				uni.switchTab({
					url:"/pages/changjing/changjing"
				})
			},
			fenleicj(item){
				getApp().globalData.category_id = item.id
				getApp().globalData.category_text = item.name
				uni.switchTab({
					url:"/pages/changjing/changjing"
				})
			},
			changjingList(){
				httpRequest.request('index/cjIndex', 'POST', {
					is_th: 1,
				}, false, false, true).then(res => {
					this.tehuiList = res.data.data
				})
				httpRequest.request('index/cjIndex', 'POST', {
					is_jx: 1,
				}, false, false, true).then(res => {
					this.jingxuanList = res.data.data
				})
			},
			getbanner() {
				httpRequest.request('index/getAdvertiseList', 'POST', {
					advertise_position_id: 4,
					is_more: 1
				}, false, false, true).then(res => {
					this.list1 = res.data
				})
			},
			remenfl() {
				httpRequest.request('index/clCategory', 'GET', {
					is_rec: 0,
					is_hot: 1
				}, false, false, true).then(res => {
					let arr = res.data
					let newListArr1 = []
					    for(let i = 0;i<arr.length;i+=9){
					        newListArr1.push(arr.slice(i,i+9))
					    }
					this.remenflList = newListArr1
					console.log(this.remenflList,"999");
				})
				httpRequest.request('index/clCategory', 'GET', {
					is_rec: 1,
					is_hot: 0
				}, false, false, true).then(res => {
					this.tuijianflList = res.data
				})
			},
			lbtclick(index) {
				console.log(this.list1[index].url,"999");
				uni.navigateTo({
					url:this.list1[index].url
				})
				// if (this.list1[index].is_dz == 1) {
				// 	uni.navigateTo({
				// 		url: "/pages/system/bannerdetail?id=" + this.list1[index].id
				// 	})
				// }
			},
			jumpurl(url,id){
				uni.navigateTo({
					url:url+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tehui {
		width: 48%;
		position: relative;
		border-radius: 10rpx;
		height: 260rpx;
		overflow: hidden;
		.rightidnum{
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
		}
		.tehuiimage {
			width: 100%;
			height: 260rpx;
		}

		.mengban {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			background-color: rgba(0, 0, 0, .3);
		}
	}

	.fenleibox {
		width: 200rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		.fenleiimg {
			width: 200rpx;
			height: 100rpx;
		}

		.mengban {
			position: absolute;
			left: 0;
			top: 0;
			width: 200rpx;
			height: 100rpx;
			background-color: rgba(0, 0, 0, .3);
		}
	}

	.flicon {
		margin: auto;
		width: 78rpx;
		height: 82rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>